<template >
  <div @click="show_detail()" v-loading.fullscreen="fullscreenLoading">
    <el-row class="info-card">
      <el-col :span="24">
        <el-card :body-style="{ padding: '10px' }">
          <el-row>
            <el-col :span="6">
              <img :src="row_data.field_mai_img " class="image" style="height: 80px;width: 80px;display: inline-block;">
            </el-col>
            <el-col :span="18">
              <el-row>
                <el-col :offset="1" :span="24" class="card-title">
                  <span>{{ row_data.title }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :offset="1" :span="24" class="card-artist">
                  <span>{{ row_data.field_mai_artist }}</span>
                </el-col>

              </el-row>
              <el-row>
                <div class="bottom clearfix">
                  <div class="lv-tag">
                    <el-tag class="lv-1">{{ row_data.field_mai_lv_easy }}</el-tag>
                    <el-tag class="lv-2">{{ row_data.field_mai_lv_basic }}</el-tag>
                    <el-tag class="lv-3">{{ row_data.field_mai_lv_advance }}</el-tag>
                    <el-tag class="lv-4">{{ row_data.field_mai_lv_expert }}</el-tag>
                    <el-tag class="lv-5">{{ row_data.field_mai_lv_master }}</el-tag>
                    <el-tag class="lv-6">{{ row_data.field_mai_lv_re }}</el-tag>
                  </div>
                </div>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>
<style lang="stylus" rel="stylesheet/stylus">
  .lv-tag
    span
      border none;
      min-width 40px;
      text-align center;
      border-radius 0;
      margin 0 2px;
    .lv-1
      background rgba(3, 128, 223, 0.9);
    .lv-2
      background rgba(33, 190, 128, 0.9);
    .lv-3
      background rgba(252, 189, 0, 0.91);
    .lv-4
      background rgba(250, 64, 65, 0.9);
    .lv-5
      background rgba(156, 64, 223, 0.9);
    .lv-6
      background rgba(187, 147, 237, 0.9);
    .el-tag
      min-width 38px;

  .info-card
    margin-bottom 0;
  .el-card
    box-shadow none;
    margin 5px 0;
  .card-title
    font-size 16px;
    color rgb(93,93,93);
  .card-artist
    font-size 11px;
    color rgb(93,93,93);
    margin-top 5px;
</style>
<script>
  export default {
    props: ['row_data'],
    data() {
      return {
        fullscreenLoading: false,
        loading_timeoutId: null
      }
    },
    computed: {
      loading() {
        return this.$store.getters.isLoading;
      }
    },
    methods: {
      show_detail() {
        let scrollTop = window.pageYOffset
          || document.documentElement.scrollTop
          || document.body.scrollTop
          || 0;
//        this.$store.commit('SHOW_SEARCH', false);
        this.$store.commit('SET_SEARCH_WORD', '');
        this.loading_timeoutId = setTimeout(() => this.fullscreenLoading = true, 1000);
        //setTimeout(() => this.$store.commit('LOADING', true), 1);
        this.$store.dispatch('getNodeDetail', this.row_data.nid).then(res => {
          if (this.loading_timeoutId) {
            clearTimeout(this.loading_timeoutId);
          }
          this.fullscreenLoading = false;
          this.$store.commit('SET_SCROLL',  scrollTop);
          this.$router.push('/detail?nid=' + this.row_data.nid);
        }).catch(res => {
          this.fullscreenLoading = false;
          clearTimeout(this.loading_timeoutId);
          console.log(res);
          alert('读取失败');
        });
      }
    }
  }
</script>